<template>
  <div class="my-favorite-wrapper">
    <van-pull-refresh v-model="isRefreshing">
    <ul v-waterfall-lower="loadMoreData" waterfall-disabled="disabled" waterfall-offset="400">
      <li v-for="(item, index) in paintingData.results" @click="viewDetail(index)" class="painting-info-item">
        <div class="painting-header">
          <img class="avatar" :src="item.user.avatar" alt="" />
          <div class="info-wrapper">
            <p class="name">{{ item.user.nickname }}</p>
            <p class="title">{{ item.user.title }}</p>
          </div>
        </div>
        <p class="painting-desc">{{ item.text }}</p>
        <image-previewer :images="item.attachments"></image-previewer>
        <div class="painting-footer">
          <span class="painting-date">{{ item.dateStr }}</span>
          <div class="painting-action">
            <img v-if="item.is_favorite" src="../../assets/icon/icon_star_selected.png" alt="" />
            <img v-else src="../../assets/icon/icon_star.png" alt="" />
            <span>收藏 {{ item.favorite_count }}</span>
          </div>
          <div class="painting-action">
            <img v-if="item.is_like" src="../../assets/icon/icon_like_selected.png" alt="" />
            <img v-else src="../../assets/icon/icon_like.png" alt="" />
            <span>已赞 {{ item.like_count }}</span>
          </div>
        </div>
      </li>
    </ul>
    <blank-content v-if="!paintingData.results.length" text="暂无内容"></blank-content>
    </van-pull-refresh>
  </div>
</template>

<script>
import Vue from 'vue'
import qs from 'qs'

import { mapGetters } from 'vuex'

import Waterfall from '@/components/vant/waterfall'
import BlankContent from '@/components/blankContent'

Vue.component(BlankContent.name, BlankContent)

// 我的作品
export default {
  name: 'MyFavorite',
  data () {
    return {
      paintingData: { results: [] },
      isRefreshing: false,
      allLoaded: false
    }
  },
  created () {
    this.initData(null)
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  watch: {
    isRefreshing() {
      if (this.isRefreshing) {
        this.refreshData()
      }
    } 
  },
  directives: {
    WaterfallLower: Waterfall('lower')
  },
  methods: {
    /*
     * 下拉刷新
     */
    refreshData() {
      var that = this
      this.paintingData = { results: [] }
      
      this.initData(null, function() {
        that.isRefreshing = false
      })
    },

    /*
     * 加载更多
     */
    loadMoreData() {
      if (this.paintingData.next) {
        this.initData(this.paintingData.next)
      }
    },

    /*
     * 获取列表数据
     */
    initData(next=null, callback=null) {
      var params = {
        'favorite': this.userInfo.id,
      }
      var url = '/works/'
      if (next) {
        url = next
      }
      this.$toast.loading({ duration: 0 })
      var paintingData = this.paintingData
      var that = this
      // 调用登陆接口
      this.axios.get(url, { params: params })
      .then(function (res) {
        that.$toast.clear()
        console.log(res.data)
        if (res.status === 200) {
          paintingData.count = res.data.count
          paintingData.next = res.data.next
          paintingData.previous = res.data.previous
          paintingData.results = paintingData.results.concat(res.data.results)
        }
        if (callback) {
          return callback()
        }
      })
      .catch(function (error) {
        that.$toast.clear()
        console.log(error)
      })
    },
    viewDetail(index) {
      var painting = this.paintingData.results[index]
      this.$router.push({ name: 'paintingDetail', params: { painting: painting }})
    },
  }
}

</script>
